<template>
  <div class="container">
    <el-card class="search-box">
      <!-- 搜索框部分 -->
      <div class="flex items-center gap-4">
        <el-input
          v-model="keyword"
          placeholder="输入搜索关键词"
          clearable
          @keyup.enter="handleSearch"
        />
        <el-button type="primary" @click="handleSearch" :disabled="!keyword"> 搜索 </el-button>
      </div>

      <!-- 搜索结果统计和导航 -->
      <div v-if="keyword && sampleText && isSearching" class="search-stats">
        <span>找到 "{{ keyword }}" 共 {{ matchCount }} 处</span>
        <!-- 右侧数量 -->
        <span v-if="matchCount > 0" class="navigation">
          <el-button circle size="small" @click="prevMatch">
            <el-icon><ArrowLeft /></el-icon>
          </el-button>
          <span class="current-position">{{ currentMatchIndex }} / {{ matchCount }}</span>
          <el-button circle size="small" @click="nextMatch">
            <el-icon><ArrowRight /></el-icon>
          </el-button>
        </span>
      </div>

      <!-- 高亮文本展示 -->
      <Highlighter
        v-if="sampleText"
        :text="sampleText"
        :keyword="isSearching ? keyword : ''"
        :current-match-index="currentMatchIndex"
        @match-count="updateMatchCount"
      />

      <!-- 空状态提示 -->
      <el-alert v-if="!sampleText" title="暂无数据" type="warning" :closable="false" class="mt-4" />
    </el-card>
  </div>
</template>

<script setup>
import { ref, onMounted, watch } from 'vue'
import Highlighter from './components/Highlighter.vue'
import { ArrowLeft, ArrowRight } from '@element-plus/icons-vue'

const keyword = ref('') // 关键词
const sampleText = ref('') // 示例文本
const matchCount = ref(0) // 找到几处
const isSearching = ref(false)
const currentMatchIndex = ref(0) // 当前选中的是第几个

// 模拟API请求
const fetchTextData = async () => {
  try {
    // 模拟网络请求延迟
    await new Promise((resolve) => setTimeout(resolve, 2000))

    // 模拟从API获取的文本数据
    sampleText.value =
      '鱼说：自由自在，遨游水底，即为价值所在。鹰说：展翅高翔，与天同高，即为价值所在。佛说：扫净心室，隐忍宽容，即为价值所在。而我说：献出芬芳，贡献才智，实为价值所在！固然，自由自在的一生是有价值的一生，然而，高呼“我要在烈火和热血中得到永生”的叶挺，虽身陷牢狱，丧失自由，却一生闪烁光芒！登临人生颠峰的一生或许是有价值的一生，但谁又能否认三尺讲台上默默耕耘的园丁们价值永存呢？急游于古今史河，穿梭于自然社会，我仔细搜寻，终于，我揭开了价值的神秘面纱：献出芬芳，收获价值！赢雪一段香的梅花是有价值的，那是因为寂寥天宇之中，它为人间奉献清香扑鼻；枝枝顶立的竹是有价值的，那是因为百花取宠之际，它为志士树立峥峥气节；幽香扑鼻的菊是有价值的，那是由于花萎虫匿之时，它为人类献上淡雅闲逸……是的，即使梅花枯萎、绿竹倒地、菊花掩去容颜，它们仍然价值永住，那是因为在人世间，它们将自己的至美、至纯无私奉献。它们的生既成就了自己，更帮助了别人。寂廖北海之畔，苏武在静静地独自牧羊。他以天地为家，以羊为伴，将自己的一片赤诚毫无保留地献给了大汉的子民，献给了他所深深眷恋的大汉山河。风头浪尖之中，郑和勇敢地乘风破浪；茫茫大海之中，郑和双眼坚定地注视前方。他将自己的赤诚热情虔诚地献给了祖国母亲；将自己的勇敢、睿智无私地献给了充满诱惑的海洋。枪林弹雨之中，张自忠在中弹倒下的一瞬依然大呼“杀敌报国”。他将自己的勇猛、忠诚真诚地献给满面疮痍的华夏大地。翻开泛黄的历史，他们的名字在浩浩汤汤的史河中熠熠生辉：苏武在奉献中，在那脱了毛的汉节中，实现了一个忠臣的价值；郑和在贡献中，在那沟通亚非的水上大动脉中，升华了一个航海先驱的.价值；张自忠也在献身中，在至死不忘报国的气节中，塑造了一个军人楷模的价值。于是，在古今的交汇路口，我彻悟：献出芬芳，收获价值。我满怀信心地踏上了当代社会，然而在物质充盈的今天，眼前的一幕幕却令我瞠目结舌：身陷泥淖中的汽车在路人视而不见的眼神中久久“趴”地；工厂中有待修理的机器在工人们“事不关己，高高挂起”的心理下彻底“退休”；流浪乞讨人员在无情川行的人流前默默忍受饥寒折磨……这些社会上的黑暗面与我们这个欣欣向荣的社会是那样得不协调。走在其中，我为那被某些人抛至脑后的奉献精神痛心，但我未尝泯灭希望，我振臂高呼：贡献芬芳，收获价值！我要顺着古往今来的奉献之士开辟的道路义无返顾地走下去。'
  } catch (error) {
    console.error('请求失败:', error)
  }
}

// 更新匹配数量的回调
const updateMatchCount = (count) => {
  matchCount.value = count
  // 重置当前选中索引
  if (count > 0) {
    if (currentMatchIndex.value < 1 || currentMatchIndex.value > count) {
      currentMatchIndex.value = 1
    }
  } else {
    currentMatchIndex.value = 0
  }
}

// 搜索处理函数 - 触发搜索并更新高亮状态
const handleSearch = () => {
  if (!keyword.value) return
  isSearching.value = true
}

// 导航到下一个匹配项
const nextMatch = () => {
  if (matchCount.value === 0) return
  
  if (currentMatchIndex.value < matchCount.value) {
    currentMatchIndex.value++
  } else {
    // 到达最后一个时，回到第一个（循环导航）
    currentMatchIndex.value = 1
  }
}

// 导航到上一个匹配项
const prevMatch = () => {
  if (matchCount.value === 0) {
    currentMatchIndex.value = 0
    return
  }

  if (currentMatchIndex.value > 1) {
    currentMatchIndex.value--
  } else {
    // 在第一个时，跳到最后一个（循环导航）
    currentMatchIndex.value = matchCount.value
  }
}

watch(
  () => keyword.value,
  (newVal, oldVal) => {
    if (newVal !== oldVal) {
      isSearching.value = false
      currentMatchIndex.value = 0
    }
  },
)

// 组件挂载时加载数据
onMounted(() => {
  fetchTextData()
})
</script>

<style scoped lang="scss">
.container {
  max-width: 800px;
  margin: 40px auto;
  padding: 0 20px;
}

.search-box {
  :deep(.el-card__body) {
    padding: 24px;
  }

  .flex {
    display: flex;
    gap: 10px;
  }
}

.search-stats {
  margin: 10px 0;
  color: #606266;
  font-size: 14px;
  display: flex;
  justify-content: space-between;
  align-items: center;

  .navigation {
    display: flex;
    align-items: center;
    gap: 10px;

    .current-position {
      font-weight: bold;
      color: #409eff;
    }
  }
}
</style>
